<template>
    <view class="app-svip" v-if="permission == 1" :style="{'padding-top': data.margin + 'rpx'}">
        <view :style="areaStyle">
            <view class="buy-user-info">
                <app-vip-card v-model="data" :top="0"></app-vip-card>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
    import AppVipCard from '../../../components/page-component/app-vip-card/app-vip-card.vue';
    export default {
        name: "app-svip",
        components: {
            AppVipCard,
        },
        props: {
            value: Object,
            bg: Object
        },
        data() {
            return {
                height: 136,
                data: {}
            }
        },
        computed: {
            ...mapState({
                mall: state => state.mallConfig.mall,
                permission: state => state.mallConfig.plugin.vip_card ? state.mallConfig.plugin.vip_card.permission : 0,
                is_vip_card_user: function(state) {
                    return state.user.info && state.user.info.is_vip_card_user ? 1 : 0;
                }
            }),
            ...mapGetters({
                userInfo: 'user/info',
            }),
            areaStyle() {
                let style = `padding: ${this.data.card_margin}rpx 0;`;
                // #ifdef MP-ALIPAY
                style += `height: ${this.data.card_margin*2 + 120}rpx;`
                // #endif
                if(this.data.bg_style == 1) {
                    style += `background-color: ${this.data.bg_color};`
                }else {
                    style += `background-image: url("${this.data.bg_pic}");background-size: 100% 100%;`
                }
                return style;
            }
        },
        created() {
            this.data = JSON.parse(JSON.stringify(this.value));
            this.data.margin = this.data.margin ? this.data.margin : 0;
            this.data.card_margin = this.data.card_margin ? this.data.card_margin : 10;
        }
    }
</script>

<style scoped lang="scss">
.app-svip {
    .buy-user-info {
        margin: 0 24rpx;
        height: 120rpx;
    }
}
</style>